frontend: Add disk/storage column to nodes list view#5675
frontend: Add disk/storage column to nodes list view#5675aabhinavvvvvvv wants to merge 1 commit into
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: aabhinavvvvvvv The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
0cbfafb to
258207b
Compare
illume
left a comment
There was a problem hiding this comment.
Thanks for these changes.
can you please rebase against main to remove the merge main commit?
Why this matters
Merge commits from main make the PR history harder to review. Please rebase your branch on top of the latest main instead, then update the PR with the rebased commits.
Can you please have a look at the git commits to see if they meet the contribution guidelines? We use a Linux kernel style of git commits. See the contributing guide for general context, and please see previous git commits with git log for examples.
Commits that need attention
frontend: Add disk/storage column to nodes list view— Only one file changed insidefrontend/; add a sub-area so it's clear what was touched (e.g.frontend: ComponentName: description).
Commit guidelines
- Use atomic commits focused on a single change.
- Use the title format
<area>: <Description of changes>— description must start with a capital letter. - Keep the title under 72 characters (soft requirement).
- Explain the intention and why the change is needed.
- Make commit titles meaningful and describe what changed.
- Do not add code that a later commit rewrites; squash or reorder commits instead.
- Do not include
Fixes #NNin commit messages.
Good examples:
frontend: HomeButton: Fix so it navigates to homebackend: config: Add enable-dynamic-clusters flag
There was a problem hiding this comment.
Pull request overview
This PR adds a Disk column to the Nodes list so users can see node ephemeral storage allocatable/capacity information alongside CPU and memory.
Changes:
- Adds
StorageBarChartfor node ephemeral storage visualization. - Adds a Disk column to
NodeList. - Adds new i18n keys and updates the node list story snapshot.
CI status and commit history were not available in this review context; please confirm checks pass and the PR history is linear.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/components/node/Charts.tsx | Adds StorageBarChart for ephemeral storage. |
| frontend/src/components/node/List.tsx | Adds the Disk column to the node table. |
| frontend/src/components/node/snapshots/List.Nodes.stories.storyshot | Updates node list snapshot for the new column. |
| frontend/src/i18n/locales/en/translation.json | Adds English Disk/storage labels. |
| frontend/src/i18n/locales/de/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/es/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/fr/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/hi/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/it/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/ja/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/ko/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/pt/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/ru/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/ta/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/zh/translation.json | Adds fallback Disk/storage keys. |
| frontend/src/i18n/locales/zh-tw/translation.json | Adds fallback Disk/storage keys. |
3f8d616 to
ef00549
Compare
|
@illume i've squashed into single commit and resolved copilot's comments |
illume
left a comment
There was a problem hiding this comment.
Thanks for these changes.
Can you please have a look at the git commits to see if they meet the contribution guidelines? We use a Linux kernel style of git commits. See the contributing guide for general context, and please see previous git commits with git log for examples.
Commits that need attention
frontend:— Missingarea: descriptionprefix — e.g.frontend: HomeButton: Fix so it navigates to homeorbackend: config: Add enable-dynamic-clusters flag.
Commit guidelines
- Use atomic commits focused on a single change.
- Use the title format
<area>: <Description of changes>— description must start with a capital letter. - Keep the title under 72 characters (soft requirement).
- Explain the intention and why the change is needed.
- Make commit titles meaningful and describe what changed.
- Do not add code that a later commit rewrites; squash or reorder commits instead.
- Do not include
Fixes #NNin commit messages.
Good examples:
frontend: HomeButton: Fix so it navigates to homebackend: config: Add enable-dynamic-clusters flag
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.
Comments suppressed due to low confidence (2)
frontend/src/components/node/List.tsx:89
- The new disk column is only covered by a snapshot where both fixture nodes render an empty disk cell (the story helper has empty/missing ephemeral storage values), so the non-zero StorageBarChart path, tooltip contents, and numeric disk sorting are not exercised. Please add node fixture data or a focused test with non-zero
ephemeral-storagecapacity/allocatable values.
render: node => <StorageBarChart node={node} />,
frontend/src/components/node/Charts.tsx:107
Capacityis already localized in the glossary namespace (for examplefrontend/src/i18n/locales/es/glossary.json:237), while the newly addedtranslation|Capacityentries are empty outside English and fall back to English. Using the translation namespace here makes this tooltip partially untranslated for non-English users; use the existing glossary key/namespace instead of duplicating the term.
{t('translation|Allocatable')}: {allocatableInfo.value}
{allocatableInfo.unit} / {t('translation|Capacity')}: {capacityInfo.value}
{capacityInfo.unit} ({getPercentStr(allocatable, capacity)})
illume
left a comment
There was a problem hiding this comment.
Thanks for this PR.
The open review comments from Copilot still need attention — can you have a look? Once addressed, please mark them as resolved.
ef00549 to
d12a4ea
Compare
|
@illume I've resolved the comments and force pushed the cleaned-up single commit |
d12a4ea to
f7e044c
Compare
|
@illume i've resolved copilot's comments |
f7e044c to
4f1d868
Compare
4f1d868 to
95c9569
Compare
|
@illume i've resolved copilot's comments |
| const raw = | ||
| (node.status?.allocatable as any)?.['ephemeral-storage'] ?? | ||
| (node.status?.allocatable as any)?.ephemeralStorage ?? | ||
| '0'; |
| const capacityRaw = | ||
| (node.status?.capacity as any)?.['ephemeral-storage'] ?? | ||
| (node.status?.capacity as any)?.ephemeralStorage ?? | ||
| '0'; | ||
| const allocatableRaw = | ||
| (node.status?.allocatable as any)?.['ephemeral-storage'] ?? | ||
| (node.status?.allocatable as any)?.ephemeralStorage ?? | ||
| '0'; |
| const allocatable = parseDiskSpace(allocatableRaw); | ||
|
|
||
| if (capacity === 0) { | ||
| return <></>; |
illume
left a comment
There was a problem hiding this comment.
Thanks for these changes.
Can you please address the open review comments? Once you've resolved each one, please mark it as resolved.
95c9569 to
8100c27
Compare
8100c27 to
b0c72a4
Compare
|
@illume i've resolved copilot's comments |
Summary
This PR adds a Disk column to the Nodes list view, showing ephemeral storage allocatable vs capacity as a progress bar.
Related Issue
Fixes #5607
Changes
StorageBarChartcomponent tofrontend/src/components/node/Charts.tsxdiskcolumn to the Nodes list infrontend/src/components/node/List.tsxSteps to Test
Screenshots